<template>
  <div class="info">
    <p class="title">编辑个人资料</p>
    <hr/>
    <div class="personal">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="username" label="代理商简称">
          <el-input v-model="ruleForm.username" placeholder="代理商简称"></el-input>
        </el-form-item>
        <el-form-item prop="industry" label="行业">
          <el-input placeholder="行业" v-model="ruleForm.industry"></el-input>
        </el-form-item>
        <el-form-item prop="description" label="简介">
          <el-input v-model="ruleForm.description" placeholder="简介"></el-input>
        </el-form-item>
        <el-form-item prop="companyName" label="公司名称">
          <el-input v-model="ruleForm.companyName" placeholder="公司名称"></el-input>
        </el-form-item>
        <el-form-item prop="contactPerson" label="联系人">
          <el-input v-model="ruleForm.contactPerson" placeholder="联系人"></el-input>
        </el-form-item>
        <el-form-item prop="phoneNumber" label="手机号">
          <el-input v-model="ruleForm.phoneNumber" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item prop="qq" label="qq号">
          <el-input v-model="ruleForm.qq" placeholder="qq号"></el-input>
        </el-form-item>
        <el-form-item prop="wechat" label="微信号">
          <el-input placeholder="签名" v-model="ruleForm.wechat"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import mixin from '../mixins'
import {updateUserMsg, getUserOfId} from '../api/index'

export default {
  name: 'info',
  mixins: [mixin],
  data: function () {
    return {
      ruleForm: {
        id: -1,
        username: '',
        industry: '',
        description: '',
        companyName: '',
        contactPerson: '',
        phoneNumber: '',
        qq: '',
        wechat: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        industry: [
          {required: true, message: '请输入行业', trigger: 'blur'}
        ],
        description: [
          {required: true, message: '请输入简介', trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  mounted() {
    this.getMsg(this.userId)
  },
  methods: {
    getMsg(id) {
      getUserOfId(id)
        .then(res => {
          this.ruleForm.id = res.data.id
          this.ruleForm.username = res.data.username
          this.ruleForm.industry = res.data.industry
          this.ruleForm.description = res.data.description
          this.ruleForm.companyName = res.data.companyName
          this.ruleForm.contactPerson = res.data.contactPerson
          this.ruleForm.phoneNumber = res.data.phoneNumber
          this.ruleForm.qq = res.data.qq
          this.ruleForm.wechat = res.data.wechat
        })
        .catch(err => {
          console.log(err)
        })
    },
    go_back() {
      this.$router.back()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this
          let token = _this.$store.getters.token
          let config = {
            headers:
              {
                'Authorization': token
              }
          }
          updateUserMsg(this.ruleForm, config)
            .then(res => {
              if (res.data.code === 200) {
                this.$store.commit('setUsername', this.ruleForm.username)
                mixin.methods.notify_success('编辑成功')
                setTimeout(function () {
                  _this.$router.back()
                }, 2000)
              } else {
                mixin.methods.notify_error('编辑失败')
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/info.scss';
</style>
